import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

const TinyMCE = () => {
    const handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
    };

    return (
        <Editor
            apiKey="k7g7fie6e7vkoavglm0bjs55wtguqb3l7sts8z6vud9htifw"
            init={{
                height: 500,
                menubar: true,
                plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen ' +
                    'image link media code codesample table charmap pagebreak nonbreaking anchor ' +
                    'insertdatetime advlist lists wordcount help emoticons autosave ' +
                    'autoresize formatpainter',
                toolbar:
                    'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic ' +
                    'underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent ' +
                    'indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote ' +
                    'subscript superscript removeformat | table image media charmap emoticons hr pagebreak ' +
                    'insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
            }}
            onEditorChange={handleEditorChange}
        />
    );
};

export default TinyMCE;
